<template>
  <a-modal
    :title="$t('所属会员')"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    class="modal_title"
    v-drag
  >
    <template slot="footer">
      <a-button key="come" @click="handleCancel">{{ $t('关闭') }}</a-button>
    </template>
    <a-spin :spinning="confirmLoading" ref="modalcontent" class="tableSpinPadding">
      <div style="margin: 0 10px">
        <a-row style="margin-bottom:6px">
          <a-col :span="10">{{$t('票号')}}：{{model.ticketNo}}</a-col>
          <a-col :span="10">{{$t('名称')}}：{{model.goodsName}}</a-col>
        </a-row>
        <a-row style="margin-bottom:6px">
          <a-col :span="10">{{$t('剩余次数')}}：{{model.totalNumber==0?$t('不限次'):model.remainNumber}}</a-col>
          <a-col :span="10">{{$t('有效期')}}：{{model.validityStart?(model.validityStart + '~' + model.validityEnd):$t('不限期')}}</a-col>
        </a-row>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          class="j-table-force-nowrap"
          :loading="false"
          :pagination="false"
        >
          <template slot="imgSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px; font-style: italic">{{ $t('无图片') }}</span>
            <a-popover v-else trigger="hover">
              <template slot="content">
                <img :src="text" width="240px" />
              </template>
              <img :src="text" height="25px" alt="" style="max-width: 80px; font-size: 12px; font-style: italic" />
            </a-popover>
          </template>
        </a-table>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { getAction } from '@/api/manage'

export default {
  name: 'MemberModal',
  components: {},
  data() {
    return {
      width: 1000,
      visible: false,
      disableSubmit: false,
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 },
      },
      columns: [
        {
          title: this.$t('会员ID'),
          dataIndex: 'id',
          className: 'cus-table-header',
          align: 'center',
        },
        {
          title: this.$t('手机号'),
          dataIndex: 'phone',
          className: 'cus-table-header',
          align: 'center',
        },
        {
          title: this.$t('卡号'),
          dataIndex: 'memberCard.chipNo',
          className: 'cus-table-header',
          align: 'center',
        },
        {
          title: this.$t('姓名'),
          dataIndex: 'name',
          className: 'cus-table-header',
          align: 'center',
        },
        {
          title: this.$t('照片'),
          dataIndex: 'memberPictures[0].picture',
          className: 'cus-table-header',
          align: 'center',
          scopedSlots: { customRender: 'imgSlot' },
        },
      ],
      dataSource: [],
    }
  },
  methods: {
    getBindAccount() {
      let that = this
      getAction('/member/bisMemberTicket/getBindList', {
        id: that.model.id,
      }).then((res) => {
        if (res.success) {
          that.dataSource = res.result
        } else {
          that.dataSource = []
        }
      })
    },
    show(record) {
      this.visible = true
      this.model = Object.assign({}, record)
      this.getBindAccount()
    },
    close() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>
<style scoped>
</style>